<template>
  <div class="web-container">
    <!-- 轮播图 + 公告 -->
    <div class="container-flex">
      <div class="swiper">
        <el-carousel trigger="click" height="375px">
          <el-carousel-item v-for="(item,index) in bannerList" :key="index">
            <img :src="item.filePath" alt="">
            <div class="pic-title"><span>{{item.resTitle||''}}</span></div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="notice">
        <div class="notice-list">
          <div class="notice-item" v-for="(item,index) in noticeList" :key="index" @click="goMessage(item)">
            <span class="notice-item-label">[公告]</span> {{item.title}}
          </div>
        </div>
      </div>
    </div>
    <div class="container-flex">
      <div class="book-recommend" v-loading="recommend">
        <div class="title">
          <span><img v-if="accId ==3" src="/static/images/base/book-icon.png" alt="">
          <img v-else src="/static/images_dz/base/book-icon.png" alt="">
          图书推荐</span>
           <span class="more" @click="more('/book/all')">更多>></span>
        </div>
        <div class="content" >
          <div class="book-item" @click="goToBookInfo(item.bookId,item.columnId,item.bookName)" v-for="(item,index) in list.bookList" :key="index" >
            <span class="book-cover" :style="{backgroundImage:'url('+ item.cover + ')'}"></span>
            <span class="book-name" v-html="item.bookName">如果你也记得我</span>
            <span class="book-author" v-html="item.author"></span>
            <span class="book-desc">{{item.press}}</span>
          </div>
        </div>
      </div>
      <div class="new-book" v-loading="shangjia">
        <div class="title">
          <img v-if="accId ==3" src="/static/images/base/news.png" alt="">
          <img v-else src="/static/images_dz/base/news.png" alt="">
          最新上架
        </div>
        <div class="content" >
          <div class="book-item" @click="goToBookInfo(item.bookId,item.columnId,item.bookName)" v-for="(item,index) in newBookList" :key="index" >
            <span class="book-name" v-html="item.bookName">如果你也记得我 </span>
            <span class="book-author">{{item.author}}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 广告 -->
    <div class="ad" v-if="adv[0]">
      <img  :src="adv[0].pictures[0].filePath" alt="">
    </div>
     <div class="ad" v-else>
      <img src="../../static/images/banner/adv.png" alt="">
    </div>
    <!-- 专题活动 -->
    <div class="events">
      <div class="title">
        <span class="icon">
          <img v-if="accId ==3" src="/static/images/base/ad.png" alt="">
          <img v-else src="/static/images_dz/base/ad.png" alt="">
          专题活动</span>
        <span class="more" @click="more('/events/eventsIndex')">更多>></span>
      </div>
      <div class="content">
        <div class="events-item" v-for="(item,index) in activityList" :key="index" v-if="activityList" @click="goToContent1(item)">
          <span class="events-cover" :style="{backgroundImage:'url('+ item.cover + ')'}"></span>
          <span class="events-name">{{item.activityName}}</span>
        </div>
      </div>
    </div>
    <!-- 期刊报纸 -->
    <div class="container-flex">
      <div class="book-newspaper">
        <div class="title">
          <span class="icon"><img v-if="accId ==3" src="/static/images/base/paper.png" alt="">
          <img v-else src="/static/images_dz/base/paper.png" alt="">期刊报纸</span>
          <span class="more" @click="more('/periodical')">更多>></span>
        </div>
        <div class="container" v-loading="recommend">
          <div class="content">
            <div class="book-item" @click="goToNewsInfo(item)" v-for="(item,index) in list.periodicalList" :key="index">
              <span class="book-cover" :style="{backgroundImage:'url('+ImgSrc + item.cover+'.jpg'+')'}"></span>
              <span class="book-desc">{{item.source}}</span>
            </div>
          </div>
          <div class="sub-content">
            <div class="book-item" @click="goToNews1Info(item)" v-for="(item,index) in list.newspaperList" :key="index">
              <span class="book-cover" :style="{backgroundImage:'url('+newspaperUrl + item.cover+'.jpg'+')'}"></span>
              <span class="book-desc">{{item.paperName}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="new-book-recommend" v-if="goodBookList">
        <div class="title">
          好书推荐榜 
          <img v-if="accId ==3" src="/static/images/base/rank.png" alt="">
          <img v-else src="/static/images_dz/base/rank.png" alt="">
        </div>
        <div class="content">
          <div class="block" v-for="(item,index) in goodBookList" :key="index" @click="goToBookInfo(item.fileid,'',item.bookName)">
            <div class="book-item" v-if="index == 0">
              <img class="medal" src="/static/images/base/one.png" alt="">
              <img class="book-cover" :src="item.imgurl" alt="">
              <div class="first-rec">
                <span class="book-name"><span class="name" v-html="item.bookName">鱼王</span> <span class="book-read">{{item.count}}</span></span>
                <span class="book-author">{{item.author}}</span>
                <span class="book-press"></span>
              </div>
            </div>
            <div class="book-item" @click="goToBookInfo(item.fileid,'',item.bookName)" v-else>
              <span class="book-index">{{index+1}}</span>
              <span class="book-name"><span class="name" v-html="item.bookName">鱼王</span> <span class="book-read">{{item.count}}</span></span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="ad" v-if="adv[1]">
      <img :src="adv[1].pictures[0].filePath" alt="">
    </div>
    <div class="ad" v-else>
      <img src="../../static/images/banner/adv.png" alt="">
    </div>
    <div class="container-flex">
      <div class="video">
        <div class="title">
           <span class="icon">
             <img v-if="accId ==3" src="/static/images/base/video.png" alt="">
             <img v-else src="/static/images_dz/base/video.png" alt="">
           视听推荐</span>
           <span class="more" @click="more('/videomusic/all')">更多>></span>    
        </div>
        
        <div class="container">
          <div class="content" v-if="list.videoList.length>0">
            <div class="first-item" @click="goToContent(list.videoList[0])">
              <img class="video-cover" :src="list.videoList[0].videoCover" alt="">
              <span class="video-title">{{list.videoList[0].videoName}}</span>
              <!-- <span class="video-desc">2017年06月16日</span> -->
            </div>
            <div class="block" v-if="list.videoList.length>0">
              <div class="video-item" v-for="(item,index) in list.videoList.slice(1, 5)" :key="index" @click="goToContent(item)">
                <img class="video-cover" :src="item.videoCover" alt="">
                <span class="video-title">{{item.videoName}}</span>
                <img class="video-play" src="/static/images/base/video_play.png" alt="">
              </div>
            </div>
          </div>
          <span class="hr"></span>
          <div class="sub-content">
            <div class="music-item" v-for="(item,index) in 4" v-show="false" :key="index">
              <img class="music-cover" src="/static/images/base/book.png" alt="">
              <img class="music-play" src="/static/images/base/music.png" alt="">
              <span class="music-title">
                晓说2018
              </span>
            </div>
          </div>
        </div>
      </div>

      <div class="new-book-everyday">
        <div class="title">
          每月阅读榜 
          <img v-if="accId ==3" src="/static/images/base/rank.png" alt="">
          <img v-else src="/static/images_dz/base/rank.png" alt="">
        </div>
        <div class="content">
          <div class="block" v-for="(item,index) in monthBookList" :key="index" @click="goToBookInfo(item.fileid,'',item.bookName)">
            <div class="book-item" v-if="index == 0">
              <img class="medal" src="/static/images/base/one.png" alt="">
              <img class="book-cover" :src="item.imgurl" alt="">
              <div class="first-rec">
                <span class="book-name"><span class="name" v-html="item.bookName">鱼王</span> <span class="book-read">{{item.count}}</span></span>
                <span class="book-author" v-html="item.author||''"></span>
                <span class="book-press"></span>
              </div>
            </div>
            <div class="book-item" @click="goToBookInfo(item.fileid,'',item.bookName)" v-else>
              <span class="book-index">{{index+1}}</span>
              <span class="book-name"><span class="name" v-html="item.bookName">鱼王</span> <span class="book-read">{{item.count}}</span></span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 悦读推荐 -->
    <div class="container-flex">
      <div class="read">
        <div class="title">
          <span>
            <img v-if="accId ==3" src="/static/images/base/read.png" alt="">
            <img v-else src="/static/images_dz/base/read.png" alt="">
          悦读推荐</span>
          <span class="more" @click="more('read/all')">更多>></span>
        </div>
        <div class="content" v-if="list.readList.length > 0" v-loading="recommend">
          <div class="read-item-top" @click="goToInfo(list.readList[0])">
            <img v-if="list.readList[0].cover" :src="list.readList[0].cover" alt="">
            <img v-else src="../../static/images/base/read_box.png" alt="">
            <div class="item-right">
              <span class="read-title">
                {{list.readList[0].mainTitle}}
              </span>
              <span class="read-author">{{list.readList[0].author||"本站管理员"}}</span>
              <span class="read-desc" v-html="delHtmlTag(list.readList[0].content)">
                26岁的老猴子一只，从小留守，自卑，内
                向，贫穷。举个例子，高中时候，一个星
                期最低用了五毛钱，最高一个星期零花钱
                五块钱。衣服都是...
              </span>
            </div>
          </div>
         <div v-for="(item,index) in list.readList.slice(1, 3)" :key="index">
             <span class="hr"></span>
          <div class="read-item-bottom" @click="goToInfo(item)">
            <div class="item-right">
              <span class="read-title">
                {{item.mainTitle}}
              </span>
              <span class="read-author">{{item.author||"本站管理员"}}</span>
              <span class="read-desc" v-html="delHtmlTag(item.content)">
                时下最流行的饮品应该就是奶盖了，街面上琳琅满目的品牌，都在卖
                奶盖，可是动辄十
              </span>
            </div>
            <img v-if="item.cover" :src="item.cover" alt="">
             <img v-else src="../../static/images/base/read_box.png" alt="">
          </div>
         </div>
        </div>
      </div>
      <div class="new-book-everyday">
        <div class="title">
          图书收藏榜
          <img v-if="accId ==3" src="/static/images/base/rank.png" alt="">
          <img v-else src="/static/images_dz/base/rank.png" alt="">
        </div>
        <div class="content">
          <div class="block" v-for="(item,index) in collectionBookList" :key="index" @click="goToBookInfo(item.fileid,'',item.bookName)">
            <div class="book-item" v-if="index == 0">
              <img class="medal" src="/static/images/base/one.png" alt="">
              <img class="book-cover" :src="item.imgurl" alt="">
              <div class="first-rec">
                <span class="book-name"><span class="name" v-html="item.bookName">鱼王</span> <span class="book-read">{{item.count}}</span></span>
                <span class="book-author">{{item.author}}</span>
                <!-- <span class="book-press">广西师范大学出版社</span> -->
              </div>
            </div>
            <div class="book-item" v-else @click="goToBookInfo(item.fileid,'',item.bookName)">
              <span class="book-index">{{index+1}}</span>
              <span class="book-name"><span class="name" v-html="item.bookName">鱼王</span> <span class="book-read">{{item.count}}</span></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {banner,authJson,index,notice,newsColum,activitiesList,selectRankings,monthRankings,collectionRankings,advList} from "@/api/index";
import { GetNewVideoList, GetNewVideoTwoList } from "@/api/Api";
import baseUrl from "@/api/base";
export default {
  data() {
    return {
      bannerList: [
        {
          filePath: "/static/images/banner/banner1.png"
        },
        {
          filePath: "/static/images/banner/banner2.png"
        },
        {
          filePath: "/static/images/banner/banner3.png"
        }
      ],
      adv:[],
      noticeList: [],
      newBookList: [],
      activityList: [],
      goodBookList: [],
      monthBookList: [],
      collectionBookList: [],
      classDetailList: [],
      detailList: [],
      list: {
        bookList: [],
        periodicalList: [],
        newspaperList: [],
        readList: [],
        videoList:[]
      },
      recommend: true,
      shangjia:true
    };
  },
  components: {},
  computed: {
    accId(){
      return sessionStorage.getItem('accId')
    }
  },
  created() {},
  mounted() {
    this.ImgSrc = baseUrl.periodicalUrl;
    this.newspaperUrl = baseUrl.newspaperUrl;
    this.init();
    this.authJson();
    // this.videoList();
  },
  methods: {
    chioceImg(item) {
      // return ("http://cacv.cnki.net/Content/CACV/FM/" +item.substring(0, 8) +"/" +item +".jpg");
    },
    videoList() {
      GetNewVideoList().then(result => {
        result.data.map((value, index) => {
          GetNewVideoTwoList(value.type_name, 9999, 1)
            .then(result => {
              result.data.map(value2 => {
                value2["type_name"] = value.type_name;
              });
              this.classDetailList.push(...result.data);
            })
            .then(result => {
              // return;
              this.detailList = this.classDetailList.slice(0, 5);
              // console.log(this.detailList);
            });
        });
      });
    },
    //进入活动详情
    goToContent1(item) {
      this.$router.push({
        name: "eventsContent",
         query: {
          data:JSON.stringify(item)
          // activityId: item.activityId,
          // title: item.activityName
        }
      });
    },

    //报纸详情
    goToNews1Info(item) {
      this.$router.push(
        "/newspaper/info?max_file_name=" +
          item.cover +
          "&resourceType=4&value=" +
          item.paperName
      );
    },
    //期刊详情
    goToNewsInfo(item) {
      this.$router.push(
        "/periodical/info?max_file_name=" +
          item.cover +
          "&resourceType=5&value=" +
          item.source
      );
    },
    //悦读详情
    goToInfo(item) {
      this.$router.push(
        "/read/content?articleId=" +
          item.articleId +
          "&title=" +
          item.mainTitle +
          "&cover=" +
          item.cover
      );
    },
    goToBookInfo(bookId, columnId, bookName) {
      this.$router.push(
        "/book/info?bookId=" +
          bookId +
          "&columnId=" +
          columnId +
          "&bookName=" +
          bookName
      );
    },
    delHtmlTag(str) {
      return str.replace(/<[^>]+>/g,"");//去掉所有的html标记
      // .replace(/<[^>]+>/g, "").replace(/&nbsp;/g, "").replace(/□/g, "");
      // return str;
    },
    //视频页面
    goToContent(item) {
      this.$router.push({
        path: "/videomusic/video_nocontent",
        query:{
          video:JSON.stringify(item)
        }
      }
      );
    },
    init() {
      //首页五大分类资源
      index()
        .then(res => {
          this.recommend = false;
          //图书
          const list = res.data.data;
          list.map((val,index)=>{
            if(val.columnKindDes == "1"){
              let bookList = val.recommendResList
              bookList.splice(4, 2);
              this.list.bookList = bookList||[];

            }else if(val.columnKindDes == "5"){
              // 期刊
              let periodicalList = val.recommendResList
              periodicalList.splice(4, 2);
              this.list.periodicalList = periodicalList||[];
            }else if(val.columnKindDes == "4"){
              // 报纸
              let newspaperList = val.recommendResList
              newspaperList.splice(3, 3);
              this.list.newspaperList = newspaperList||[];
            }else if(val.columnKindDes == "2"){
               // 悦读
              let readList = val.recommendResList
              // readList.splice(2, 4);
              this.list.readList = readList||[];
            }
            else if(val.columnKindDes == "3"){
               // 视听
              let videoList = val.recommendResList
              this.list.videoList = videoList||[];
            }
          })
        })
        .catch(err => {
          // console.log(err);
        });
        advList().then(res=>{
        })
      //好书推荐
      selectRankings(1, 5).then(res => {
        this.goodBookList = res.data.date.list;
      });
      //每月推荐
      monthRankings(1, 8).then(res => {
        this.monthBookList = res.data.date.list;
      });
      //收藏推荐
      collectionRankings(1, 8).then(res => {
        this.collectionBookList = res.data.date.list;
      });
      //首页专题互动
      activitiesList(1, 5)
        .then(res => {
          this.activityList = res.data.data;
        })
        .catch(err => {
        });
      //获取首页banner信息
      banner(1,1)
        .then(res => {
          let bannerList = res.data.data;
          if (bannerList) {
            this.bannerList = bannerList[0].pictures;
          }
        })
        .catch(err => {
          console.log(err);
        });
        // 广告
        banner(3,4)
        .then(res => {
          this.adv = res.data.data
        })
        .catch(err => {
          console.log(err);
        });
      //获取首页最新上架信息
      newsColum()
        .then(res => {
          this.shangjia = false
          this.newBookList = res.data.data;
          // console.log(res.data.data);
        })
        .catch(err => {
          // console.log(err);
        });
      //获取首页公告信息
      notice(1,6)
        .then(res => {
          // console.log(res.data.data);
          this.noticeList = res.data.data;
        })
        .catch(err => {
          // console.log(err);
        });
    },
    //首页获取默认数据
    authJson() {
      authJson("static/json/auth.json").then(res => {
        if (res.data.flag) {
          sessionStorage.setItem("accId", res.data.accId);
          sessionStorage.setItem("orgId", res.data.orgId);
          sessionStorage.setItem("userId", res.data.userId);
        } else {
          // console.log("state");
        }
      });
    },
    //专题活动更多
    goToIdView(item){
        
    },
    goMessage(item){
       this.$router.push({
        path: '/message_content',
        query:{
          data:JSON.stringify(item)
        }
      })
    },
    more(url) {
      this.$router.push(url);
    }
  }
};
</script>
<style lang="less" scoped>
.custom-dz {
  .notice {
    background: url("/static/images_dz/base/notice-bg.png") no-repeat;
    background-color: #fff; 
  }
}
.container-flex {
  .container {
    border-radius: 0 0 10px 10px;
    overflow: hidden;
    background: #fff;
  }
}
.swiper {
  margin-top: 20px;
  height: 375px;
  width: 810px;
  img {
    height: 375px;
    width: 810px;
  }
}
.notice {
  margin-top: 20px;
  width: 355px;
  height: 375px;
  border-radius: 10px;
  background: url("/static/images/base/notice-bg.png") no-repeat;
  font-size: 16px;
  background-color: #fff; 
  .notice-list {
    margin-top: 95px;
    padding: 0 20px;
    color: #252525;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    .notice-item {
      cursor: pointer;
      border-top: 1px solid #f1f1f1;
      line-height: 45px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      .notice-item-label {
        color: #a1a1a1;
      }
    }
  }
}
.book-recommend {
  width: 810px;
  margin-top: 30px;
  .title {
    line-height: 50px;
    height: 50px;
    font-size: 20px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #252525;
    display: flex;
    align-items: center;
    justify-content: space-between;
     .more{
      font-size: 18px;
    cursor: pointer;
    }
    span:first-child{
         display: flex;
    align-items: center;
    }
    img {
      margin-right: 10px;
    }
  }
  .content {
    background: #fff;
    height: 300px;
    border-radius: 0 0 10px 10px;
    border-top: 2px solid #252525;
    padding: 17px;
    display: flex;
    justify-content: space-between;
    .book-item {
      width: 140px;
      cursor: pointer;
      span {
        display: block;
        margin-top: 5px;
      }
      .book-cover {
        display: block;
        background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538900031&di=b229ff410d7865dbda3fef5fc2294fb3&imgtype=jpg&er=1&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F6e5dc3e0bdfb3d1e11abd2f413dd6995335b0a0b51f9e-cramlf_fw658");
        background-size: cover;
        height: 188px;
        width: 140px;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.4);
      }
      .book-name {
        font-size: 16px;
        color: #252525;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-top:10px;
      }
      .book-author {
        font-size: 12px;
        color: #808080;
        margin-top:5px;
      }
      .book-desc {
        margin-top: 5px;
        font-size: 14px;
        color: #a0a0a0;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }
  }
}
.book-newspaper {
  width: 810px;
  margin-top: 30px;
  .title {
    line-height: 50px;
    height: 50px;
    font-size: 20px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #252525;
    display: flex;
    align-items: center;
    justify-content: space-between;
     .more{
      font-size: 18px;
    cursor: pointer;
    }
    .icon{
       display: flex;
    align-items: center;
    }
    img {
      margin-right: 10px;
    }
  }
  .sub-content {
    height: 118px;
    background-color: #f6f5f5;
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    .book-item {
      width: 229px;
      cursor: pointer;
    }
    .book-desc {
      font-size: 16px;
      display: block;
      margin-left: 5px;
      line-height: 40px;
      color: #252525;
    }
    .book-cover {
      display: block;
      border-radius: 10px;
      width: 229px;
      height: 83px;
      // background: #000;
      box-shadow: 0 2px 10px rgba(0,0,0,0.4);
      background-repeat: no-repeat;
      background-size: 229px 83px;
      background-position: center;
    }
  }
  .content {
    background: #fff;
    height: 264px;
    // border-radius: 0 0 10px 10px;
    border-top: 2px solid #252525;
    padding: 17px;
    display: flex;
    justify-content: space-between;
    .book-item {
      width: 140px;
      cursor: pointer;
      span {
        display: block;
        margin-top: 5px;
      }
      .book-cover {
        display: block;
        background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538900031&di=b229ff410d7865dbda3fef5fc2294fb3&imgtype=jpg&er=1&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F6e5dc3e0bdfb3d1e11abd2f413dd6995335b0a0b51f9e-cramlf_fw658");
        background-size: cover;
        height: 193px;
        width: 140px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.4);
        border-radius: 10px;
      }
      .book-desc {
        margin-top: 10px;
        font-size: 16px;
        color: #252525;
      }
    }
  }
}
.new-book-recommend {
  margin-top: 30px;
  width: 355px;
  .title {
    display: flex;
    align-items: center;
    line-height: 50px;
    height: 50px;
    font-size: 20px;
    color: #252525;
    img {
      margin-left: 10px;
    }
  }
  .content {
    background: #fff;
    height: 437px;
    border-radius: 0 0 10px 10px;
    border-top: 2px solid #252525;
    font-size: 18px;
    padding: 0 20px;
    .name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 210px;
    }
    .block:nth-child(1) {
      .name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 110px;
      }
       .book-name .book-read {
          font-size: 20px;
          font-weight: bold;
          font-style: italic;
          color: #f06642;
        }
    }
    .block:nth-child(2) {
      .book-index {
        background-color: #f06642;
        color: #fff;
      }
    }
    .block:nth-child(3) {
      .book-index {
        background-color: #faac2a;
        color: #fff;
      }
    }
    .book-item {
      cursor: pointer;
      border-top: 1px solid #f1f1f1;
      display: flex;
      align-items: center;
      padding: 20px 0;
      .medal {
        width: 50px;
        height: 50px;
        align-self: flex-start;
      }
      .book-index {
        display: inline-block;
        margin-right: 10px;
        width: 22px;
        height: 22px;
        line-height: 22px;
        text-align: center;
        background-color: #eeeeee;
      }
      .book-cover {
        width: 84px;
        height: 114px;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.4);
      }
      .first-rec {
        display: flex;
        flex-direction: column;
        margin-left: 5px;
        flex: 1;
        span {
          height: 30px;
          line-height: 30px;
        }
        span + span {
          margin-top: 10px;
        }
      }
      .book-name {
        color: #252525;
        font-size: 16px;
        display: flex;
        width: 100%;
        justify-content: space-between;
        .book-read {
          font-size: 20px;
          color: #a1a1a1;
        }
      }
      .book-press {
        font-size: 16px;
        color: #c1c1c1;
      }
      .book-author {
        font-size: 14px;
        color: #c1c1c1;
      }
    }
  }
}
.new-book-everyday {
  margin-top: 30px;
  width: 355px;
  .title {
    line-height: 50px;
    height: 50px;
    font-size: 20px;
    color: #252525;
    display: flex;
    align-items: center;
    img {
      margin-left: 10px;
    }
  }
  .content {
    background: #fff;
    height: 583px;
    border-radius: 0 0 10px 10px;
    border-top: 2px solid #252525;
    font-size: 18px;
    padding: 0 20px;
    .name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 210px;
    }
    .block:nth-child(1) {
      .name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 110px;
      }
       .book-name .book-read {
          font-size: 20px;
          font-weight: bold;
          font-style: italic;
          color: #f06642;
        }
    }

    .block:nth-child(2) {
      .book-index {
        background-color: #f06642;
        color: #fff;
      }
    }
    .block:nth-child(3) {
      .book-index {
        background-color: #faac2a;
        color: #fff;
      }
    }
    .book-item {
      border-top: 1px solid #f1f1f1;
      cursor: pointer;
      display: flex;
      align-items: center;
      padding: 16px 0;
      .medal {
        width: 50px;
        height: 50px;
        align-self: flex-start;
      }
      .book-index {
        display: inline-block;
        margin-right: 10px;
        width: 22px;
        height: 22px;
        line-height: 22px;
        text-align: center;
        background-color: #eeeeee;
      }
      .book-cover {
        width: 84px;
        height: 114px;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.4);
      }
      .first-rec {
        display: flex;
        flex-direction: column;
        margin-left: 5px;
        width: 100%;
        flex: 1;
        span {
          height: 30px;
          line-height: 30px;
        }
        span + span {
          margin-top: 10px;
        }
      }
      .book-name {
        color: #252525;
        font-size: 16px;
        display: flex;
        width: 100%;
        justify-content: space-between;
        .book-read {
          font-size: 20px;
          color: #a1a1a1;
        }
      }
      .book-press {
        font-size: 16px;
        color: #c1c1c1;
      }
      .book-author {
        font-size: 14px;
        color: #c1c1c1;
      }
    }
  }
}
.new-book {
  margin-top: 30px;
  width: 355px;
  .title {
    line-height: 50px;
    height: 50px;
    font-size: 20px;
    color: #252525;
    display: flex;
    align-items: center;
    img {
      margin-right: 10px;
    }
  }
  .content {
    background: #fff;
    height: 334px;
    border-radius: 0 0 10px 10px;
    border-top: 2px solid #252525;
    font-size: 16px;
    padding: 0 20px;
    .book-item {
      cursor: pointer;
      display: flex;
      border-top: 1px solid #f1f1f1;
      justify-content: space-between;
      line-height: 53px;
      .book-name {
        color: #252525;
        width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .book-author {
        font-size: 14px;
        color: #c1c1c1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
.ad {
  margin: 40px 0 20px 0;
  height: 100px;
  border: 2px solid #fff;
  border-radius: 15px;
  overflow: hidden;
  img {
    width: 100%;
    height: 100px;
  }
}

//视听
.video {
  margin-top: 30px;
  width: 810px;
  .title {
    display: flex;
    align-items: center;
    line-height: 50px;
    height: 50px;
    font-size: 20px;
    color: #252525;
    align-items: center;
    justify-content: space-between;
    .icon{
      display: flex;
      align-items: center;
    }
    .more{
      font-size: 18px;
      cursor: pointer;
    }
    img {
      margin-right: 10px;
    }
  }
  .hr {
    display: block;
    width: 95%;
    height: 1px;
    margin: 0 auto;
    background: #f1f1f1;
  }
  .sub-content {
    height: 200px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    .music-item {
      width: 178px;
      position: relative;
      cursor: pointer;
      .music-cover {
        width: 178px;
        height: 149px;
      }
      .music-title {
        display: block;
        font-size: 18px;
        color: #252525;
      }
      .music-play {
        position: absolute;
        top: 130px;
        right: 10px;
      }
    }
  }
  .content {
    background: #fff;
    height: 300px;
    // border-radius: 0 0 10px 10px;
    border-top: 2px solid #252525;
    font-size: 18px;
    padding: 20px;
    display: flex;
    .video-title {
      font-size: 16px;
      color: #252525;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .video-play {
      position: absolute;
      top: 85px;
      right: 10px;
    }
    .video-desc {
      font-size: 14px;
      color: #a1a1a1;
      display: block;
    }
    .block {
      display: flex;
      flex-wrap: wrap;
      .video-item:nth-child(2n-1){
        margin: 0px;
      }
      .video-item {
        margin-left: 30px;
        width: 184px;
        position: relative;
        cursor: pointer;
        .video-cover {
          width: 184px;
          border-radius: 10px;
          height: 106px;
          box-shadow: 0 2px 10px rgba(0,0,0,0.4);
        }
      }
    }
  }
  .first-item {
    margin-right: 20px;
    cursor: pointer;
    .video-cover {
      width: 346px;
      height: 258px;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.4);
    }
  }
}
//阅读
.read {
  margin-top: 30px;
  width: 810px;
  .title {
    display: flex;
    align-items: center;
    line-height: 50px;
    height: 50px;
    font-size: 20px;
    color: #252525;
    justify-content: space-between;
     .more{
      font-size: 18px;
    cursor: pointer;
    }
    span:first-child{
       display: flex;
    align-items: center;
    }
    img {
      margin-right: 10px;
    }
  }
  .content {
    border-top: 2px solid #252525;
    background: #fff;
    height: 543px;
    padding: 20px;
    border-radius: 0 0 10px 10px;
    .read-item-top {
      display: flex;
      cursor: pointer;
      .item-right {
        display: flex;
        flex-direction: column;
        flex: 1;
        span {
          margin-top: 20px;
        }
        .read-title {
          font-size: 20px;
          color: #252525;
          font-weight: bold;
        }
        .read-author {
          font-size: 18px;
          color: #a1a1a1;
        }
        .read-desc {
          font-size: 16px;
          color: #a1a1a1;
          line-height: 20px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 4;
          overflow: hidden;
          height: 80px;
        }
      }

      img {
        width: 350px;
        height: 245px;
        margin-right: 20px;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.4);
        
      }
    }
    .read-item-bottom {
      display: flex;
      align-items: center;
      cursor: pointer;
      .item-right {
        display: flex;
        flex-direction: column;
        width: 517px;
        flex: 1;
        .read-title {
          font-size: 20px;
          color: #252525;
          font-weight: bold;
        }
        .read-author {
          font-size: 12px;
          color: #a1a1a1;
          margin: 10px 0;
        }
        .read-desc {
          font-size: 16px;
          color: #a1a1a1;
          line-height: 20px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          height: 40px;
        }
      }

      img {
        width: 233px;
        height: 115px;
        margin-left: 20px;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.4);
      }
    }
    .hr {
      display: block;
      width: 100%;
      height: 1px;
      margin: 15px auto;
      background: #f1f1f1;
    }
  }
}
.events {
  .title {
    display: flex;
    justify-content: space-between;
    line-height: 50px;
    height: 50px;
    font-size: 20px;
    color: #252525;
    .icon {
      display: flex;
      align-items: center;
      img {
        margin-right: 10px;
      }
    }
    .more {
      font-size: 18px;
      cursor: pointer;
    }
  }
  .content {
    display: flex;
    // justify-content: space-between;
    border-radius: 0px 0px 10px 10px;
    border-top: 2px solid #252525;
    background: #fff;
    padding: 18px;
    .events-cover {
      display: block;
      background: url("/static/images/base/book.png");
      background-size: cover;
      width: 100%;
      height: 116px;
    }
    .events-name {
      font-size: 16px;
      height: 44px;
      line-height: 44px;
      display: block;
      padding: 0 5px;
    }
    .events-item {
      cursor: pointer;
      overflow: hidden;
      // margin-top: 20px;
      margin-left: 29px;
      width: 210px;
      height: 160px;
      background: #fff;
      box-shadow: 0px 2px 6px 0px rgba(230, 230, 230, 0.75);
      border-radius: 10px;
    }
    .events-item:first-child {
      margin-left: 0px;
    }
  }
}
</style>
<style lang="less">
.custom-dz {
  .swiper .el-carousel__indicator.is-active button {
    background-color: #e93926;
  }
}
.swiper {
  .el-carousel__indicators {
    right: 0px;
    left: auto;
  }
  .pic-title {
    position: absolute;
    bottom: 0px;
    left: 0px;
    color: #fff;
    padding: 10px 20px;
    width: calc(100% - 40px);
    background: rgba(0, 0, 0, 0.6);
    span {
      display: inline-block;
      width: 90%;
    }
  }
  .el-carousel__button {
    opacity: 1;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fff;
  }
  .el-carousel__indicator.is-active button {
    background-color: #1de3af;
  }

  .el-carousel {
    border-radius: 10px;
  }
}
</style>
